<!-- 擒龙形态 -->
<template>
  <div>
    <img
      :src="PIC_URL + '/tlbypcWeb/tagColumn/qlcl (1).png'"
      alt=""
      class="left-img"
    />
    <div class="dragon">
      <div class="wrap">
        <div class="tag flex">
          <span class="item">简介</span>
        </div>
        <div class="box flex">
          <div>
            <img
              :src="PIC_URL + '/tlbypcWeb/tagColumn/qlcl_kapian (1).png'"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="left">
        <!-- 右边的内容信息 -->
        <div class="header">
          <!-- 搜索 -->
          <p class="headerP">
            <el-input
              class="seach_input"
              placeholder="请输入股票代码"
              v-model="search"
              background="#999"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>

              <span slot="append" @click="searchCode1" class="seachBtn"
                >股票搜索</span
              >
            </el-input>
            <span class="wx" @click="clear">清空搜索结果</span>
          </p>

          <!-- 分页-->
          <div class="paging clear">
            <button class="prev arrow" @click="prev">上一页</button>
            <span class="num">第{{ currentPage }}/{{ allpage }}页</span>
            <span class="next arrow" @click="next">下一页</span>
          </div>
        </div>
        <div class="footer">
          <p class="footerTop">
            {{ teachingSeries }}
          </p>
          <!-- 内容 -->
          <div class="content_all">
            <div v-if="res != null">
              <div
                class="content"
                v-for="(item, index) in res"
                :key="item.num"
                :class="{ active: index == num }"
                @dblclick="dbclickFn(item)"
                @click="danji(item, index)"
              >
                <div>
                  <p class="content_id" type="index">{{ index + 1 }}</p>
                  <p class="content_code">{{ item.stockCode.substr(0, 6) }}</p>
                  <p class="content_codename">{{ item.stockName }}</p>
                  <p class="content_date">
                    {{ item.publishTime.split(" ")[0] }}
                  </p>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
            <div v-else style="margin-top: 25px">
              <img :src="PIC_URL + '/tlbypcWeb/wushuju.png'" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { stockMarker, blockStock } from "../script/utils";

// 获取全部的接口数据
import { getStockList } from "../api/api";
import dayjs from "dayjs";
export default {
  data() {
    return {
      num: 0,
      res: [],
      cId: "",
      productColumnId: location.href.indexOf("test") > -1 ? 79 : 54,
      imgSrc: "",
      categoryProfile: "",
      search: "", //搜索
      // 分页器
      total: 0,
      currentPage: 1,
      pageSize: 5,
      allpage: 0,
      articleList: [],
      stockCode: "",
      teachingSeries: "",
    };
  },
  components: {},
  mounted() {
    this.getStockList();
    document.title = "擒龙策略";
  },
  methods: {
    async getStockList() {
      const { productId, token } = this.$route.params;
      // const img = await img1();
      this.imgSrc = `${this.PIC_URL}/tlbypcWeb/tagColumn/qlcl_bg.png`;
      const params = {
        stockCode: this.search,
        cId: this.cId,
        productId,
        productColumnId: this.productColumnId,
        clientCentralToken: token,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      };
      // 查找接口数据信息
      await getStockList(params).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          if (data.rows != null) {
            this.teachingSeries = data.rows[0].teachingSeries;
          }
          this.res = data.rows;

          this.total = data.total;
          this.allpage = Math.ceil(this.total / this.pageSize);
        }
      });
    },
    // 搜索----------------------------------------------
    async searchCode1() {
      this.currentPage = 1;
      this.getStockList();
    },
    // 清空数据
    clear() {
      this.search = "";
      this.getStockList();
    },
    // 分页----------------------------
    prev() {
      if (this.currentPage == 1) return;
      this.currentPage--;
      this.getStockList();
    },
    next() {
      if (this.currentPage == this.allpage) return;
      this.currentPage++;
      this.getStockList();
    },
    // 单机事件
    danji(item, index) {
      this.teachingSeries = item.teachingSeries;
      this.num = index;
    },
    // 双击进入详情列表
    dbclickFn(item) {
      var stockCode = item.stockCode;
      if (/^(200)/.test(stockCode)) {
        stockCode = stockCode.slice(0, 6) + ".SH";
      }
      if (/^(100)/.test(stockCode)) {
        stockCode = stockCode.slice(0, 6) + ".SZ";
      }
      stockMarker(stockCode, "擒龙策略");
    },
  },
};
</script>
<style lang="scss" scoped>
.left-img {
  width: 100%;
  display: block;
  margin: 20px auto;
  width: 265px;
  height: 35px;
}
.dragon {
  display: flex;
  overflow-x: scroll;
  font-size: 20px;
  line-height: 40px;
  .wrap {
    padding: 0 47px;
    width: 539px;
    border: 1px solid #313337;
    box-sizing: border-box;
    height: 842px;
    .tag {
      border-bottom: 1px solid #313337;
      height: 62px;
      align-items: center;
      justify-content: center;
      .item {
        font-size: 24px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 0 27px;
        cursor: pointer;
        font-weight: bold;
        color: #8193e7;
        position: relative;
        &::after {
          content: "";
          display: block;
          position: absolute;
          width: 100%;
          height: 3px;
          background: #8193e7;
          bottom: -10px;
          border-radius: 1px;
          right: 0;
        }
      }
    }
    .box {
      justify-content: center;
      padding: 50px 0 0;
      .content {
        width: 446px;
        height: 626px;
        align-items: center;
        position: relative;
        justify-content: center;
        .txt {
          font-size: 22px;
          color: #ffffff;
          line-height: 35px;
          width: 242px;
          max-height: 319px;
        }
      }
    }
  }
  .paging {
    min-width: 290px;
    top: -38px;
    margin: 0 20px;
    box-sizing: border-box;
    .num {
      font-size: 16px;
      color: #ff8a00;
      padding: 0 8px;
      letter-spacing: 1px;
    }
    .arrow {
      position: relative;
      top: 2px;
      width: 90px;
      height: 33px;
      color: #7f86a9;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #182042;
      border: 1px solid #232d57;
      border-radius: 4px;
      cursor: pointer;
    }
    .prev {
      &:hover {
        background: #3d51ab;
        color: #ffffff;
      }
      &:active {
        background: #33407c;
      }
    }
    .next {
      &:hover {
        background: #3d51ab;
        color: #ffffff;
      }
      &:active {
        background: #33407c;
      }
    }
  }
  // 右边新添加的内容--------------------------------------
  .left {
    margin-left: 20px;
    .header {
      display: flex;
      justify-content: space-between;
      max-width: 1280px;
      .headerP {
        display: flex;
        .seach_input {
          width: 305px;
          font-size: 16px;
          /deep/.el-input__inner {
            color: #bcbfc4;

            border: 1px solid #323337;
            color: #bcbfc4;
            background: #090910;
          }
        }
        /deep/.el-input-group__append {
          background: #4e596d;
          border: 1px solid #434448;
          color: #fff;
          cursor: pointer;
        }
      }
      /deep/.el-input-group__append:hover {
        background: #851313;
      }
    }
    .wx {
      font-size: 15px;
      text-decoration: underline;
      color: #8cb4f7;
      margin-left: 18px;
      cursor: pointer;
    }
    .wx:hover {
      color: #ff8900;
    }
    .wx:active {
      color: #2b7dff;
    }
    .footer {
      margin: 0 auto;
      text-align: center;
      margin-top: 20px;
      width: 1321px;
      height: 780px;
      border: 1px solid #323337;
      .footerTop {
        width: 491px;
        height: 136px;

        background: url($PIC_URL + "/tlbypcWeb/tagColumn/title_bg.png")
          no-repeat;
        font-size: 42px;
        color: #ff8a00;
        line-height: 136px;
        margin-left: 415px;
        text-align: center;
        margin-top: 57px;
      }
      .content {
        margin-top: 33px;
        position: relative;
        width: 214px;
        height: 309px;
        margin-left: 43px;
        float: left;
        background: url($PIC_URL + "/tlbypcWeb/tagColumn/gegu_bg_nor.png")
          no-repeat;
        .content_id {
          position: absolute;
          top: 25px;
          left: 100px;
          font-size: 30px;
          color: #58b6ff;
        }
        .content_code {
          width: 100%;
          position: absolute;
          top: 125px;
          font-size: 26px;
          font-weight: 400;
          color: #ff8a00;
        }
        .content_codename {
          width: 100%;
          position: absolute;
          bottom: 79px;
          font-size: 26px;
          font-weight: 400;
          color: #ff8a00;
        }
        .content_date {
          position: absolute;
          bottom: 25px;
          right: 43px;
          font-size: 22px;
          font-weight: 400;
          color: #9ca8bc;
        }
        &.active {
          background: url($PIC_URL + "/tlbypcWeb/tagColumn/gegu_bg_sel.png")
            no-repeat;
          background-size: 100% 100%;
          color: #bcbfc4;
        }
      }
      .content:hover {
        background: url($PIC_URL + "/tlbypcWeb/tagColumn/gegu_bg_sel.png")
          no-repeat;
      }
    }
  }
}
</style>
